<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #searchOptionTb{display: none;}
</style>
<table id="searchgrid" class="topjui-datagrid"></table>
<div id="searchOptionTb">
    <form id="option_form">
        <input id="searchOptionbox" name="compname"  placeholder="请输入查询条件"  style="width:180px;height: 24px;">
    </form>
</div>

<script type="text/javascript" charset="utf-8" th:inline="none">

    var searchgrid;
    $(function(){
        var ss = $('#searchOptionTb').html();
        console.log(ss);
        searchgrid = $('#searchgrid').datagrid({
            url:"/customer/list",
            method:'get',
            fit : false,
            fitColumns : true,
            border : false,
            pagination : true,
            idField : 'id',
            pageSize : 5,
            pageList : [ 5,20 ],
            sortName : 'id',
            sortOrder : 'desc',
            singleSelect: true,
            checkOnSelect : true,
            selectOnCheck : true,
            width:1000,
            nowrap : false,
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'compname',
                    title:'公司名称',
                    sortable:true,
                    width:150
                }, {
                    field:'dutynumber',
                    title:'公司税号',
                    width:60
                }, {
                    field:'headname',
                    title:'联系人',
                    width:60
                }, {
                    field:'telphone',
                    title:'联系电话',
                    width:60
                }, {
                    field:'bankname',
                    title:'开户行',
                    width:60
                }, {
                    field:'banknumber',
                    title:'银行账号',
                    width:60
                }
            ]],
            toolbar:[{
                text:$('#searchOptionTb').html()
            },{
                text:'查询',
                iconCls : 'fa fa-search',
                height: '24px',
                handler : function() {
                    search_search();
                }
            }]
        });

    });

    function search_editFun(id) {
        var index = searchgrid.datagrid('getRowIndex', id);
        var rows = searchgrid.datagrid('getRows');
        var o = rows[index];
        console.log(o);
        //$('#customerform').form('load', o);
        $('#customerid').val(id);
        $('#customername').val(o.compname);
    }

    function search_search(){
        var param = form2Json("option_form");
        $('#option_form').form('submit', {
            url : '/customer/list',
            onSubmit:function(){
                return true;
            },
            success : function(result) {
                try {
                    var r = $.parseJSON(result);
                    searchgrid.datagrid({
                        url:'/customer/list',
                        pagination : true,
                        idField : 'id',
                        pageSize : 10,
                        pageList : [ 10,20 ],
                        sortName : 'id',
                        sortOrder : 'desc',
                        queryParams: param,　　//关键之处
                        data:r
                    });

                } catch (e) {
                    $.messager.alert('提示', result);
                }
            }
        });
    }
</script>
</html>